<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css?v=1.0">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-graduation-cap me-2"></i>学生信息管理系统
        </a>
    </div></nav>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="d-flex align-items-center mb-4">
                <a th:href="@{/students}" class="btn btn-light btn-sm rounded-circle me-3">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h2 class="mb-0">学生详情信息</h2>
            </div>

            <div class="card border-0 shadow rounded-4 overflow-hidden">
                <div class="card-header bg-primary text-white py-4">
                    <div class="d-flex align-items-center">
                        <div class="avatar-lg me-4">
                            <div class="avatar-title bg-light text-primary rounded-circle display-4">
                                <i class="fas fa-user"></i>
                            </div></div><div>
                            <h2 class="text-white mb-1" th:text="${student.name}"></h2>
                            <p class="text-white-50 mb-0" th:text="${student.department} + ' | ' + ${student.year} + '年级'"></p>
                        </div></div></div>

                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="info-card p-3 rounded-3 h-100">
                                <h5 class="d-flex align-items-center fw-bold">
                                    <i class="fas fa-id-card me-2 text-primary"></i>基本信息
                                </h5>
                                <hr class="my-3">
                                <div class="mb-3">
                                    <small class="text-muted d-block">学生ID</small>
                                    <div class="fw-bold" th:text="${student.id}"></div>
                                </div>
                                <div class="mb-3">
                                    <small class="text-muted d-block">姓名</small>
                                    <div class="fw-bold" th:text="${student.name}"></div>
                                </div><div>
                                    <small class="text-muted d-block">年级</small>
                                    <div class="fw-bold" th:text="${student.year} + '年级'"></div>
                                </div></div></div>

                        <div class="col-md-6 mb-4">
                            <div class="info-card p-3 rounded-3 h-100">
                                <h5 class="d-flex align-items-center fw-bold">
                                    <i class="fas fa-university me-2 text-primary"></i>院系信息
                                </h5>
                                <hr class="my-3">
                                <div class="mb-3">
                                    <small class="text-muted d-block">所属院系</small>
                                    <div class="fw-bold" th:text="${student.department}"></div>
                                </div><div>
                                    <small class="text-muted d-block">院系状态</small>
                                    <span class="badge bg-success">在读</span>
                                </div></div></div>

                        <div class="col-md-12 mb-4">
                            <div class="info-card p-3 rounded-3">
                                <h5 class="d-flex align-items-center fw-bold">
                                    <i class="fas fa-address-book me-2 text-primary"></i>联系方式
                                </h5>
                                <hr class="my-3">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <small class="text-muted d-block">电子邮箱</small>
                                        <div class="fw-bold" th:text="${student.email}"></div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <small class="text-muted d-block">联系电话</small>
                                        <div class="fw-bold" th:text="${student.phone}"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted d-block">联系地址</small>
                                        <div class="fw-bold">北京市海淀区学院路37号</div>
                                    </div></div></div></div></div>

                    <div class="d-flex justify-content-end gap-3 mt-4">
                        <a th:href="@{/students}" class="btn btn-light px-4">返回列表</a>
                        <a th:href="@{/students/edit/{id}(id=${student.id})}" class="btn btn-primary px-4">
                            <i class="fas fa-edit me-2"></i>编辑信息
                        </a>
                    </div></div></div></div></div></div>

<footer class="bg-light py-4 mt-5">
    <div class="container text-center">
        <p class="mb-0">© 2023 学生信息管理系统 | 学生详情</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>